import React from 'react'
import {WeaColorPicker,
    WeaTools,
    WeaDialog,
    WeaSearchGroup,
    WeaFormItem,
    WeaInput,
    WeaSelect,
    WeaHelpfulTip,
    WeaLocaleProvider,
    WeaInputNumber,
    WeaError,
    WeaCheckbox
} from 'ecCom'

import {Button,Icon} from 'antd'
import {WeaMaterialLib} from 'weaPortalPublic';

const getLabel = WeaLocaleProvider.getLabel;
class Content extends React.Component{

    render(){
        let diplay ="none";
        if(this.props.data.viewType=="1")
        { diplay = "";}
        return <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@1s6dzr`} showGroup={true}>

            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@uqrpha`} label={getLabel(229,"标题")} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@9w7kc0`}  style={{width:313}} value={this.props.data.title} viewAttr={2} onChange={(value)=>{this.props.titleChange(value);
                    if(value === '') this.refs.weaError.showError();
                }}/>
            </WeaFormItem>

            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@9ly3zs`} label="流程类型" labelCol={{span: 6}} wrapperCol={{span: 16}}>
              <div style={{width: '100%'}}>
                   <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@l0p75z`}
                    options={this.props.data.options}
                    viewAttr="3"
                    value={this.props.data.viewType}
                    onChange={value => this.props.changeViewType(value)}
                    />
              </div>
            </WeaFormItem>

            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@x97ghu`} label={getLabel(19493,"显示条数")}  labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@xdrdrl`}
                    value = {this.props.data.showNum}
                    onChange = {(value)=> this.props.ShowNumChnage(value)}
                />
            </WeaFormItem>
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@eyptq4`} label='批量处理地址' labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@lvjs09`}  style={{width:313}}  value = {this.props.data.setting.batchHandlerUrl} viewAttr={2}  onChange = {(value)=> this.props.setStateData({batchHandlerUrl:value})}/>
            </WeaFormItem>

            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@e0wdzb`} label={getLabel(82641,"显示未读数")}  style={{"display":diplay}} labelCol={{span: 6}} wrapperCol={{span: 18}} >
                <div style={{display:'inline-block',width:'70px'}}>
                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@0q4qqq`}
                        value={this.props.data.isCount}
                        display="switch"
                        id='test'
                        onChange = {(value) => this.props.changeCount(value)}
                    />
                </div>
            </WeaFormItem>

            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@5iackj`} label={getLabel(387941,"选择图标")}  labelCol={{span: 6}} wrapperCol={{span: 18}}>
                {
                    this.props.data.icon ? (
                        <div className="e9desktop-menu-add-img-edit">
                            <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@0bsp23`}
                                multiCheck={false} onChange={(value)=>{ this.props.changeIcon(value)}} type='button'
                            >
                                <img src={ this.props.data.icon} alt="" className="e9desktop-menu-add-img-edit-img" title={getLabel(387150,"更换图标")}/>
                            </WeaMaterialLib>
                            <div className="e9desktop-menu-add-img-edit-del" title={getLabel(82746,"删除图标")}>
                                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@hf8pjb`} type="cross" onClick={() =>  this.props.changeIcon("") }/>
                            </div>
                        </div>
                    ) : (
                        <div className="e9desktop-menu-add-img-add">
                            <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@we390p`} multiCheck={false} onChange={(value)=>{ this.props.changeIcon(value)}} type='button' >

                                <div className="e9desktop-menu-add-img-add-icon" title= {getLabel(387151,"添加图标")}>
                                    <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@7gtgwe`} type="plus"/>
                                </div>
                            </WeaMaterialLib>
                        </div>
                    )
                }
            </WeaFormItem>
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@sdm8f9`} label={getLabel(21004,"是否自动刷屏")}  labelCol={{span: 6}} wrapperCol={{span: 18}}>
                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@87qr10`}
                    value={this.props.data.setting.isAutoReflush}
                    onChange={(value)=> this.props.setStateData({isAutoReflush:value})}
                />
            </WeaFormItem>
            {
                this.props.data.setting.isAutoReflush == '1' ? (
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@pfsm68`} label={getLabel(21005,"自动刷屏间隔时间(分钟)")}  labelCol={{span: 6}} wrapperCol={{span: 18}}>
                        <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@d9tlh0`}
                            value = {this.props.data.setting.reflushSpeed}
                            onChange={(value)=> this.props.setStateData({reflushSpeed:value})}
                        />
                    </WeaFormItem>
                )  : null
            }

        </WeaSearchGroup>
    }
}

export default Content;